<span page-title>{{ 'Products' | translate }}</span>

<div data-extend-template="layouts/table-with-header.html">

  <div data-block="header">
    <h2 translate>Products</h2>
  </div>

  <div data-block="list-actions">
    <button type="button" class="btn btn-primary"
            ui-sref="products.new.form"
            bst-feature-flag="custom_products"
            ng-show="permitted('create_products')">
      <span translate>Create Product</span>
    </button>

    <button type="button" class="btn btn-default"
            ng-click="goToDiscoveries()"
            bst-feature-flag="custom_products"
            ng-show="permitted('edit_products')"
            ng-disabled = "disableRepoDiscovery">
      <span translate>Repo Discovery</span>
    </button>

    <span select-action-dropdown>
      <ul class="dropdown-menu-right" uib-dropdown-menu role="menu" aria-labelledby="split-button">
        <li role="menuitem" ng-class="{disabled: table.numSelected === 0}">
          <a ng-click="syncProducts()" ng-show="permitted('sync_products')" disable-link="table.numSelected === 0" translate>
            Sync Selected
          </a>
        </li>

        <li role="menuitem" ng-show="permitted('edit_products')" ng-class="{disabled: table.numSelected === 0}">
          <a ng-click="openAdvancedSyncModal()" disable-link="table.numSelected === 0" translate>
            Advanced Sync
          </a>
        </li>

        <li role="menuitem" ng-show="permitted('edit_products')" ng-class="{disabled: table.numSelected === 0}">
          <a ng-click="verifyChecksumProducts()" disable-link="table.numSelected === 0" translate>
            Verify Content Checksum
          </a>
        </li>

        <li role="menuitem" ng-show="permitted('edit_products')" ng-class="{disabled: table.numSelected === 0}">
          <a ng-click="openSyncPlanModal()" disable-link="table.numSelected === 0" translate>
            Manage Sync Plan
          </a>
        </li>

        <li role="menuitem" ng-show="permitted('edit_products')" ng-class="{disabled: table.numSelected === 0}">
          <a ng-click="openHttpProxyModal()" disable-link="table.numSelected === 0" translate>
            Manage HTTP Proxy
          </a>
        </li>

        <li class="divider"></li>

        <li role="menuitem" ng-show="permitted('destroy_products')" ng-class="{disabled: table.numSelected === 0}">
          <a ng-click="openModal()" disable-link="table.numSelected === 0" translate>Remove</a>

          <div bst-modal="removeProducts()" model="table">
            <div data-block="modal-header"
                 translate
                 translate-n="table.getSelected().length"
                 translate-plural="Remove {{ table.getSelected().length }} products?">
              Remove product?
            </div>
            <div data-block="modal-body"
                 translate
                 translate-n="table.getSelected().length"
                 translate-plural="Are you sure you want to remove {{ table.getSelected().length }} products?">
              Are you sure you want to remove the {{ table.getSelected()[0].name }} product?
            </div>
          </div>
        </li>
      </ul>
    </span>
  </div>

  <span data-block="no-rows-message" translate>
    You currently don't have any Products<span bst-feature-flag="custom_products">, you can add Products using the button on the right</span>.
  </span>

  <span data-block="no-search-results-message" translate>
    Your search returned zero Products.
  </span>

  <div data-block="table">
    <table class="table table-striped table-bordered" ng-class="{'table-mask': table.working}">
      <thead>
      <tr bst-table-head row-select>
        <th bst-table-column="name" sortable><span translate>Name</span></th>
        <th bst-table-column="description"><span translate>Description</span></th>
        <th bst-table-column="sync_status"><span translate>Sync Status</span></th>
        <th bst-table-column="sync_plan"><span translate>Sync Plan</span></th>
        <th bst-table-column class="number-cell"><span translate>Repositories</span></th>
      </tr>
      </thead>

      <tbody>
      <tr bst-table-row ng-repeat="product in table.rows" row-select="product">
        <td bst-table-cell>
          <a ui-sref="product.repositories({productId: product.id})">
            {{ product.name }}
          </a>
        </td>
        <td bst-table-cell>{{ product.description }}</td>
        <td bst-table-cell>
          <div ng-include="'products/views/partials/product-table-sync-status.html'"></div>
        </td>
        <td bst-table-cell>
          {{ product.sync_plan.name }}
          <span ng-hide="product.sync_plan" translate>None</span>
        <span ng-show="product.sync_plan">
          ({{ product.sync_plan.interval }})
        </span>
        </td>
        <td bst-table-cell class="number-cell">{{ product.repository_count }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
